<template>
  <div class="file-preview">
    <div class="file-info">
      <div class="file-icon" v-html="getFileIcon(file)"></div>
      <div class="file-details">
        <div class="file-name" :title="file.name">{{ file.name }}</div>
        <div class="file-size">{{ formatFileSize(file.size) }}</div>
      </div>
    </div>
    
    <div v-if="isUploading" class="upload-progress-container">
      <div class="upload-progress-bar">
        <div class="upload-progress-fill" :style="{ width: `${progress}%` }"></div>
      </div>
      <div class="upload-progress-text">
        <template v-if="progress < 100">{{ progress }}%</template>
        <template v-else>
          <span class="upload-complete">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </span>
        </template>
      </div>
    </div>
    
    <button class="remove-file-button" @click="$emit('remove')" :disabled="isUploading">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  file: File;
  progress: number;
  isUploading: boolean;
}>();

defineEmits<{
  (e: 'remove'): void;
}>();

// 获取文件扩展名
const fileExtension = computed(() => {
  return props.file.name.split('.').pop()?.toLowerCase() || '';
});

// 获取文件类型图标
function getFileIcon(file: File): string {
  const extension = fileExtension.value;
  const type = file.type;
  
  // 文档类型
  if (type.includes('pdf') || extension === 'pdf') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e53e3e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="8" y="19" font-family="sans-serif" font-size="8" fill="#e53e3e">PDF</text>
      </svg>
    `;
  }
  
  if (type.includes('word') || extension === 'doc' || extension === 'docx') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="8" y="19" font-family="sans-serif" font-size="8" fill="#3b82f6">DOC</text>
      </svg>
    `;
  }
  
  if (type.includes('excel') || extension === 'xls' || extension === 'xlsx' || extension === 'csv') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="8" y="19" font-family="sans-serif" font-size="8" fill="#10b981">XLS</text>
      </svg>
    `;
  }
  
  if (type.includes('powerpoint') || extension === 'ppt' || extension === 'pptx') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="8" y="19" font-family="sans-serif" font-size="8" fill="#f59e0b">PPT</text>
      </svg>
    `;
  }
  
  if (type.includes('text/plain') || extension === 'txt') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="8" y1="13" x2="16" y2="13"></line>
        <line x1="8" y1="17" x2="16" y2="17"></line>
      </svg>
    `;
  }
  
  if (type.includes('markdown') || extension === 'md') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="8" y="19" font-family="sans-serif" font-size="8" fill="#8b5cf6">MD</text>
      </svg>
    `;
  }
  
  if (type.includes('json') || extension === 'json') {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <text x="7" y="19" font-family="sans-serif" font-size="7" fill="#ec4899">JSON</text>
      </svg>
    `;
  }
  
  // 默认文件图标
  return `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
      <polyline points="14 2 14 8 20 8"></polyline>
    </svg>
  `;
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>

<style scoped>
.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background-color: #f9fafb;
  transition: all 0.2s ease;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-preview:hover {
  background-color: #f3f4f6;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0; /* 允许子元素收缩 */
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: rgba(107, 114, 128, 0.05);
  padding: 4px;
  transition: transform 0.2s ease;
}

.file-icon:hover {
  transform: scale(1.05);
}

.file-details {
  flex: 1;
  min-width: 0; /* 允许子元素收缩 */
}

.file-name {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.file-size {
  font-size: 0.75rem;
  color: #6b7280;
}

.upload-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex: 1;
  max-width: 200px;
}

.upload-progress-bar {
  flex: 1;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 3px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  transform: translateX(-100%);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* 上传完成时的样式 */
.upload-progress-fill[style*="width: 100%"] {
  background-color: #10b981;
  transition: background-color 0.3s ease;
}

.upload-progress-text {
  font-size: 0.75rem;
  color: #6b7280;
  width: 40px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.upload-complete {
  display: flex;
  align-items: center;
  animation: fadeIn 0.5s ease;
}

.upload-complete svg {
  animation: checkmark 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes checkmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.remove-file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 50%;
  margin-left: 8px;
  transition: all 0.2s;
}

.remove-file-button:hover {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.remove-file-button:disabled {
  color: #d1d5db;
  cursor: not-allowed;
  background-color: transparent;
}
</style>